<!--
  * 登录
  *
-->
<template>
  <div class="login-container">
    <div class="box-item desc">
      <div class="welcome">
        <p style="text-align: center;margin-top: 50%;"></p>
        <p style="text-align: center;margin-top: 10%;"> 综合管理平台</p>
      </div>
      <div class="app-qr-box">
        <!-- <div class="app-qr">
          <img :src="zhuoda" />
          <span class="qr-desc"> 加微信，骚扰卓大 :) </span>
        </div>
        <div class="app-qr">
          <img :src="xiaozhen" />
          <span class="qr-desc"> 关注：小镇程序员 </span>
        </div> -->
      </div>
    </div>
    <div class="box-item login">
      <!-- <img class="login-qr" :src="loginQR" /> -->
      <div class="login-title">账号登录</div>
      <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
        <a-form-item name="account">
          <a-input v-model:value.trim="loginForm.account" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="userPass">
          <a-input-password v-model:value="loginForm.userPass" autocomplete="on"
            :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item name="captchaCode">
          <!--<a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" di />
          <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />-->
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
        </a-form-item>
        <a-form-item>
          <div class="btn" @click="onLogin">登录</div>
        </a-form-item>
      </a-form>
      <div class="more">
        <div class="title-box">
          <p class="line"></p>
          <p class="title">其他方式登录</p>
          <p class="line"></p>
        </div>
        <!--<div class="login-type">
          <img :src="aliLogin" />
          <img :src="qqLogin" />
          <img :src="googleLogin" />
          <img :src="weiboLogin" />
        </div>-->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { message } from 'ant-design-vue';
  import { onMounted, onUnmounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { loginApi } from '/@/api/system/login/login-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
  import { useUserStore } from '/@/store/modules/system/user';
  import { saveTokenToCookie } from '/@/utils/cookie-util';

  import gongzhonghao from '/@/assets/images/1024lab/1024lab-gzh.jpg';
  import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
  import loginQR from '/@/assets/images/login/login-qr.png';
  import xiaozhen from '/@/assets/images/1024lab/xiaozhen-gzh.jpg';

  import aliLogin from '/@/assets/images/login/ali-icon.png';
  import googleLogin from '/@/assets/images/login/google-icon.png';
  import qqLogin from '/@/assets/images/login/qq-icon.png';
  import weiboLogin from '/@/assets/images/login/weibo-icon.png';

  import { buildRoutes } from '/@/router/index';
  import { smartSentry } from '/@/lib/smart-sentry';
  import md5 from 'blueimp-md5';

  //--------------------- 登录表单 ---------------------------------

  const loginForm = reactive({
    account: '',
    userPass: '',
    captchaCode: '',
    captchaUuid: '',
    loginDevice: LOGIN_DEVICE_ENUM.PC.value,
  });
  const rules = {
    account: [{ required: true, message: '用户名不能为空' }],
    userPass: [{ required: true, message: '密码不能为空' }],
    //captchaCode: [{ required: true, message: '验证码不能为空' }],
  };

  const showPassword = ref(false);
  const router = useRouter();
  const formRef = ref();
  const rememberPwd = ref(false);

  onMounted(() => {
    document.onkeyup = (e) => {
      if (e.keyCode == 13) {
        onLogin();
      }
    };
  });

  onUnmounted(() => {
    document.onkeyup = null;
  });

  //登录
  async function onLogin() {
    formRef.value.validate().then(async () => {
      try {
        SmartLoading.show();
        loginForm.userPass=md5(loginForm.userPass);
        const res = await loginApi.login(loginForm);
        if(res.success){
            //stopRefrestCaptchaInterval();
            saveTokenToCookie(res.data.token ? res.data.token : '');
            message.success('登录成功');

            const loginInfo = await loginApi.getLoginInfo();
            //更新用户信息到pinia
            useUserStore().setUserLoginInfo(loginInfo.data,res.data.token);
            //构建系统的路由
            buildRoutes();
            router.push('/home');
        }
        else{
            message.error(res.message);
        }
      } catch (e) {
        if (e.data && e.data.code === 30001) {
          loginForm.captchaCode = '';
          getCaptcha();
        }
        smartSentry.captureError(e);
      } finally {
        SmartLoading.hide();
      }
    });
  }

  //--------------------- 验证码 ---------------------------------

  const captchaBase64Image = ref('');
  async function getCaptcha() {
    try {
      let captchaResult = await loginApi.getCaptcha();
      captchaBase64Image.value = captchaResult.data.captchaBase64Image;
      loginForm.captchaUuid = captchaResult.data.captchaUuid;
      beginRefrestCaptchaInterval(captchaResult.data.expireSeconds);
    } catch (e) {
      console.log(e);
    }
  }

  let refrestCaptchaInterval = null;
  function beginRefrestCaptchaInterval(expireSeconds) {
    if (refrestCaptchaInterval === null) {
      refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
    }
  }

  function stopRefrestCaptchaInterval() {
    if (refrestCaptchaInterval != null) {
      clearInterval(refrestCaptchaInterval);
      refrestCaptchaInterval = null;
    }
  }

  //onMounted(getCaptcha);
</script>
<style lang="less" scoped>
  @import './login.less';
</style>
